<template>
	<view>
		<view class="actionBar">
			<view class="marginLeft-20" style="width:200rpx;" v-if="isCutWallet">
				<view class="fs-28 bold" style="color:#000;">{{ Math.abs(CutWalletPrice) }} 金币</view>
				<view class="fs-20 marginTop-5" style="color:#999;">剩余：{{ Math.round(WalletYue) }} 金币</view>
			</view>
			<view class="baomingBtn" @click="baomingBtn">确认报名</view>
		</view>

		<uni-notice-bar showIcon show-close single scrollable :text="Notice.NoticeMemo" /></uni-section>

		<view class="commCards">
			<view class="commCardTitle">报名理由/备注</view>
			<view style="margin-top:20rpx;">
				<fui-textarea v-model="signUpInfo.SignupMemo" placeholder="请输入内容" size="24" backgroundColor="#f0f0f0"
					radius="20" height="100rpx"></fui-textarea>
			</view>
		</view>

		<view class="commCards">
			<view class="commCardTitle">确认报名信息</view>
			<view class="borderR-10 padding-all-30 marginTop-20 row-between" style="background-color:#f0f0f0;"
				@click="onJumpBaoming">
				<view class="row-start">
					<view>
						<view class="text-align-center">
							<fui-icon name="idcard-fill" size="64"></fui-icon>
						</view>
						<view>我的联系信息</view>
					</view>
					<view class="fs-24 marginLeft-20 line-height-36">
						<text
							class="fs-28 bold">联系人：{{ signUpInfo.ContactName ? signUpInfo.ContactName: '未设置' }}</text><br>
						<text
							v-if="signUpInfo.isShowWeixin">微信号：{{ signUpInfo.WeixinCode ? signUpInfo.WeixinCode: '未设置' }}</text><br>
						<text
							v-if="signUpInfo.isShowMobile">手机号：{{ signUpInfo.UserMobile ? signUpInfo.UserMobile: '未设置' }}</text><br>
						<text v-if="signUpInfo.isShowQQ">QQ号：{{ signUpInfo.QQCode ? signUpInfo.QQCode: '未设置' }}</text>
					</view>
				</view>
				<view>
					<fui-icon name="arrowright" size="34"></fui-icon>
				</view>

			</view>
		</view>
		<uni-popup type="center" ref="SecurePrompt">
			<view class="borderR-15 padding-all-15" style="width: 65vw;background-color: #fff;">
				<view class="text-align-right" @click="$refs.SecurePrompt.close()">
					<uni-icons type="closeempty" size="18"></uni-icons>
				</view>

				<view class="">
					<view class="text-align-center">
						<image :src="baseUrl + 'icon/head.png'" style="width: 100rpx;height: 100rpx;" mode="widthFix">
						</image>
					</view>
					<view class="text-align-center fs-36 marginTop-30">
						安全防骗提醒
					</view>
					<view class="fs-26 marginTop-20" style="padding: 0 30rpx;">
						<text class="fs-30">①</text>切勿独自与陌生人在室内约拍！<text class="fs-30">②</text>切勿私下发送私密隐私照片！<text
							class="fs-30">③</text>未见面先收费的合作，切勿相信！
					</view>
					<view class="fs-26 text-align-center marginTop-20">
						<text style="color: #bfbfbf;">更多查看</text><text class="marginLeft-10" style="color: #54bef6;"
							@click="$common.goNavPage(`/pages/index/advert/advert`)">《防骗指南》</text>
					</view>
					<button class="popupButton" @click="$refs.SecurePrompt.close()">我知道了</button>
				</view>
			</view>

		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				LoginInfo: 0,
				NoticeID: 0,
				Notice: {},
				inviter: 0,
				WalletYue: 0,
				signUpInfo: {
					NoticeID: 0,
					ContactName: '',
					UserMobile: '',
					WeixinCode: '',
					QQCode: '',
					isShowMobile: true,
					isShowWeixin: true,
					isShowQQ: true,
					SignupMemo: ''
				},
				isCutWallet: false,
				CutWalletPrice: 0,

				// 临时数据
				NoticeMemo: "",
				baseUrl: ''
			};
		},
		onLoad(option) {
			this.baseUrl = this.$baseUrl;
			// console.log('option', option);
			this.NoticeID = option.NoticeID;
			// this.NoticeMemo = option.NoticeMemo;
			this.signUpInfo.NoticeID = this.Notice.NoticeID
			this.getNotice()
		},
		onShow() {
			// console.log('SignupMemo', uni.getStorageSync('SignupMemo'))
			if (uni.getStorageSync('UserContactInfo')) {
				this.signUpInfo = uni.getStorageSync('UserContactInfo')
				if (uni.getStorageSync('SignupMemo')) this.signUpInfo.SignupMemo = uni.getStorageSync('SignupMemo');
			} else {
				this.getUserInfo();
			}
		},

		methods: {
			onJumpBaoming() {
				// console.log(this.signUpInfo.SignupMemo)
				if (this.signUpInfo.SignupMemo) uni.setStorageSync('SignupMemo', this.signUpInfo.SignupMemo);
				this.$common.goNavPage('/notice/addInfo')
			},
			getNotice() {
				this.$httpost('/Home/NoticeBaoming', {
					NoticeID: this.NoticeID
				}).then(res => {
					// console.log('Notice', res);
					if (res.code == 200) {
						this.Notice = res.data.Notice
						this.isCutWallet = res.data.isCutWallet
						this.CutWalletPrice = res.data.CutWalletPrice
						this.WalletYue = res.data.WalletYue
						this.getUserInfo();
						this.$refs.SecurePrompt.open()
					}

				});
			},
			getUserInfo() {
				this.signUpInfo.ContactName = this.Notice.ContactName
				this.signUpInfo.UserMobile = this.Notice.UserMobile
				this.signUpInfo.isShowMobile = this.Notice.isShowMobile
				this.signUpInfo.WeixinCode = this.Notice.WeixinCode
				this.signUpInfo.isShowWeixin = this.Notice.isShowWeixin
				this.signUpInfo.QQCode = this.Notice.QQCode
				this.signUpInfo.isShowQQ = this.Notice.isShowQQ
			},
			baomingBtn() {
				// uni.showToast({
				// 	title: `已报名，消耗${Math.abs(this.CutWalletPrice)}金币`,
				// 	icon: 'none'
				// })
				// return;
				if (uni.getStorageSync("isLogin")) {


					if (this.signUpInfo.SignupMemo == null || this.signUpInfo.SignupMemo == '') {
						uni.showToast({
							title: '请添写报名备注！',
							icon: 'none'
						})
						return false;
					}
					if (!this.signUpInfo.ContactName) {
						uni.showToast({
							title: '请填写联系人！',
							icon: 'none'
						})
						return false;
					}

					if (!this.signUpInfo.UserMobile && !this.signUpInfo.WeixinCode && !this.signUpInfo.QQCode) {
						uni.showToast({
							title: '手机号、微信号、QQ号务必填写一项！',
							icon: 'none'
						})
						return false;
					}


					if (this.WalletYue < this.CutWalletPrice) {
						uni.showModal({
							title: '金币不足！',
							content: '请充值',
							confirmText: '去充值',
							success: res => {
								if (res.confirm) {
									uni.navigateTo({
										url: `/myPages/pages/myWallet?UserID=${this.SpeedContactInfo.myUserinfo.UserID}`
									})
								}
							}
						})
						return false;
					}

					this.signUpInfo.NoticeID = this.Notice.NoticeID

					this.$httpost('/UserAction/NoticeSignUp', this.signUpInfo).then(res => {
						if (res.code == 200) {
							uni.removeStorageSync('SignupMemo');
							uni.showModal({
								title: '已提交报名，请等待联系',
								showCancel: false,
								success: (res) => {
									if (res.confirm) {
										uni.showToast({
											title: `已报名，消耗${Math.abs(this.CutWalletPrice)}金币`,
											icon: 'none'
										})
										setTimeout(() => {
											this.$common.goSwtPage('/pages/index/index');
										}, 1000)
									}
								}
							})

							// this.$common.goNavPage('/pages/login/weixinlogin');
						}
					});

				} else {
					this.$common.goNavPage('/pages/login/weixinlogin');
				}
			}
		}
	}
</script>

<style lang="scss">
	.actionBar {
		padding: 20rpx;
		position: fixed;
		z-index: 100;
		bottom: 0;
		left: 0;
		right: 0;
		height: 110rpx;
		display: flex;
		justify-content: space-between;
		background-color: #FFF;
	}

	.baomingBtn {
		background-color: $globalColor;
		color: #333;
		text-align: center;
		width: 400rpx;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 10rpx;
		margin: 10rpx;
	}

	.popupButton::after {
		border: none;
	}

	.popupButton {
		width: 100%;
		background-color: #FFDD00;
		height: 80rpx;
		margin-top: 35rpx;
		font-size: 28rpx;
	}
</style>